$("header").load("header.html");
$("footer").load("foot.html");
// $.get("./goodsAndShoppingCart/bannerGet.php",function(data){
//     // console.log(data);
//     bannerGet(data)
// },"json");
class Banner {
    constructor(oBox, oLis) {
        this.oBox = oBox;
        this.oLis = oLis;
        this.index = 0;
        this.oBox.style.backgroundImage = `url(./images/banner${this.index+1}.jpg)`;
        this.oLis[this.index].style.backgroundColor = "white";
    }
    //设置背景图的转换
    oBoxbgimg() {
        this.oBox.style.backgroundImage = `url(./images/banner${this.index+1}.jpg)`;
    }
    //设置小红点的变化  第一步和第二步用this.index连接起来，让同步在一起
    oLisbgc() {
        for (let i = 0; i < this.oLis.length; i++) {
            if (this.index == i) {
                this.oLis[i].style.backgroundColor = 'white';
            } else {
                this.oLis[i].style.backgroundColor = 'black';
            }
        }
    }
    //设置右边按钮的功能
    right() {
        this.index++;
        if (this.index == this.oLis.length) {
            this.index = 0;
        }
        this.oBoxbgimg();
        this.oLisbgc();
    }
    //设置左边按钮的功能
    left() {
        this.index--;
        if (this.index == -1) {
            this.index = this.oLis.length - 1;
        }
        this.oBoxbgimg();
        this.oLisbgc();
    }
    //设置点击小点的时候让图片转换
    clickli() {
        let that = this;
        for (let i = 0; i < oLis.length; i++) {
            oLis[i].onclick = function () {
                that.index = i;
                that.oBoxbgimg();
                that.oLisbgc();
            }
        }
    }
    //绑定事件，调用这一个事件引发所有功能
    eventbind() {
        let oright = document.getElementById('right');
        let that = this;
        oright.onclick = function () {
            that.right();
        }
        let oleft = document.getElementById('left');
        oleft.onclick = function () {
            that.left();
        }
        this.clickli();

        let time = 0;

        that.oBox.onmouseout = function () {
            time = setInterval(function () {
                that.right();
            }, 800);
        }
        that.oBox.onmouseover = function () {
            clearInterval(time);

        }
    }
}

let oBox = document.getElementById('banner');
let obanner = document.getElementsByClassName("banner")[0];
let oLis = obanner.children;
let b = new Banner(oBox, oLis);
b.eventbind();


//链接商品类型和商品详情
$.get("./goodsAndShoppingCart/getGoodsList.php",{"typeId":"001"},function(data){
    console.log(data);
    show1(data);
},"json");
function show1(data){
    let str="";
    for(let i=0;i<data.length;i++){
        str+=`
        <li><a >
                        <div>
                            <img src="${data[i].goodsImg}" alt="">
                        </div>
                        <h3>${data[i].goodsName}</h3>
                    </a>
                    <p>￥${data[i].goodsPrice}.00</p>
                </li>`;
                
    }
    $(".sort").eq(0).html(str);
    let oli=$(".sort").eq(0).children();
    for(let i=0;i<oli.length;i++){
        oli[i].onclick=function(){
            location.href="./xiangqing.html?id="+data[i].goodsId
        }
    }
}
  
$.get("./goodsAndShoppingCart/getGoodsList.php",{"typeId":"002"},function(data){
    // console.log(data);
    show2(data);
},"json");
function show2(data){
    let str="";
    for(let i=0;i<data.length;i++){
        str+=`
        <li><a href="#">
                        <div>
                            <img src="${data[i].goodsImg}" alt="">
                        </div>
                        <h3>${data[i].goodsName}</h3>
                    </a>
                    <p>￥${data[i].goodsPrice}.00</p>
                </li>`;
    }
    $(".sort").eq(1).html(str);

}
  
        

        $.get("./goodsAndShoppingCart/getGoodsList.php",{"typeId":"003"},function(data){
            console.log(data);
            show3(data);
        },"json");
        function show3(data){
            let str="";
            for(let i=0;i<data.length;i++){
                str+=`
                <li><a href="#">
                                <div>
                                    <img src="${data[i].goodsImg}" alt="">
                                </div>
                                <h3>${data[i].goodsName}</h3>
                            </a>
                            <p>￥${data[i].goodsPrice}.00</p>
                        </li>`;
            }
            $(".sort").eq(2).html(str);
            }
       
            